<!--  -->
<template>
  <view class="c-loading">
    <image src="@/assets/images/loading.png" mode="scaleToFill" />
    <text>{{ text }}</text>
  </view>
</template>

<script lang="ts" setup>
  defineProps({
    text: {
      type: String,
      default: '加载中',
    },
  });
</script>

<style lang="scss" scoped>
  @keyframes loading {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  .c-loading {
    color: $uni-color-primary;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16rpx;
    font-size: 28rpx;
    image {
      width: 32rpx;
      height: 32rpx;
      animation: loading 1s linear infinite;
    }
  }
</style>
